<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="item in options" :key="item.text" :checked="current == item.value"
                        @click="onChange(item.value)">{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        <div ref="el" id="chart" style="width: 100%;height: 300px;"></div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts';
import { statistics3 } from '~/api/index'
import { useResizeObserver } from '@vueuse/core'


const options = [
    {
        text: '近1个月',
        value: "month"
    },
    {
        text: '近1周',
        value: "week"
    },
    {
        text: '近24小时',
        value: "hour"
    }
]

const current = ref('week')


const onChange = (status) => {
    current.value = status
    getData()

}

var myChart = null
onMounted(() => {
    var chartDom = document.getElementById('chart');
    if(chartDom){
        myChart = echarts.init(chartDom);
        getData()
    }

})

//切换其它页面时销毁这个echart，以防出现白屏
onBeforeUnmount(() => {
    if (myChart) {
        echarts.dispose(myChart)
    }
})

//获取数据
function getData() {
    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    myChart.showLoading();
    statistics3(current.value).then(res => {
        option.xAxis.data = res.x
        option.series[0].data = res.y

        myChart.setOption(option);
    }).finally(() => {
        myChart.hideLoading();
    })
}

const el = ref(null)
useResizeObserver(el, (entries) => {
    myChart.resize();
})
</script>